<script setup>
import { onMounted } from 'vue';
import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import "xgplayer/dist/index.min.css"
import { videoList } from '../pages/home/index'

const props = defineProps({
  id: {
    type: String,
    default: 'mse'
  },
  url: {
    type: String,
    default: ''
  },
  playsinline: {
    type: Boolean,
    default: true
  },
  height: {
    type: Number,
    default: 99
  },
  width: {
    type: Number,
    default: 176
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  volume: {
    type: Number,
    default: 0
  },
  controls: {
    type: Boolean,
    default: false
  },
  poster: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  let player = new Player({
    id: props.id,
    url: props.url,
    isLive: true,
    plugins: [FlvPlugin],
    // height: props.height,
    // width: props.width,
    autoplay: true,
    autoplayMuted: true,
    controls: props.controls,
    closeVideoClick: true,
    videoFillMode: 'fillHeight',
    fluid: true
  })

  player.on('error', function (error) {
    //事件名称可以在上述查询
    console.log('error')
    videoList.value.forEach(v => {
      if (v.id == props.id) {
        v.status = false
      }
    })

  })


  // player.src = 'new url'
})


const tapVide = () => {

}
</script>

<template>
  <div @click="tapVide" class="w-full h-full" :id="id"></div>
</template>

<style scoped></style>
